<style lang="less" scoped>
    .cont_scroll_box {
        padding-bottom: 1.1rem;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        .detail_box {

            /*商品价格信息*/
            .detail_prise {
                display: flex;
                background: #fff;
                padding: 0 0.32rem;

                .prise_box {
                    flex-direction: row;
                    margin-top: 0.3rem;
                    width: 50%;

                    h2 {
                        color: #d63539;
                        font-size: 0.5rem;
                        float: left;
                        font-weight: normal;
                    }

                    span {
                        font-size: 0.3rem;
                        float: left;
                        margin-top: 0.15rem;
                        margin-left: 0.1rem;
                        text-decoration: line-through;
                        color: #555858;
                    }

                }
                .people_num {
                    width: 50%;
                    flex-direction: row;

                    h3 {
                        float: right;
                        font-size: 0.26rem;
                        margin-top: 0.44rem;
                        color: #666666;
                        font-weight: normal;
                    }

                }
            }
            /*商品详细信息*/
            .product_information {
                background: #fff;

                h1 {
                    font-size: 0.29rem;
                    padding: 0.21rem 0.32rem 0.29rem;
                    line-height: 1.5;
                }

            }
            /*优惠信息*/
            .product_offer {
                padding: 0.27rem 0.32rem;
                background: #fafafa;

                .coupon {

                    .voucher {
                        float: left;
                        width: 0.3rem;
                        height: 0.3rem;
                        background: url('../../assets/img/voucher.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    span {
                        font-size: 0.25rem;
                        float: left;
                        padding-top: 0.06rem;
                        margin-left: 0.11rem;
                        color: #525355;

                    }

                }
                .shipping {
                    padding-top: 0.56rem;
                    padding-bottom: 0.28rem;

                    .ship_pic {
                        float: left;
                        width: 0.3rem;
                        height: 0.3rem;
                        background: url('../../assets/img/ship.png') no-repeat center center;
                        background-size: 100% 100%;
                    }

                    .ship_one {
                        float: left;

                        span {
                            font-size: 0.25rem;
                            float: left;
                            padding-top: 0.06rem;
                            margin-left: 0.11rem;
                            color: #525355;

                        }

                    }
                    .ship_two {
                        float: left;
                        padding-left: 0.25rem;

                        span {
                            font-size: 0.25rem;
                            float: left;
                            padding-top: 0.06rem;
                            margin-left: 0.11rem;
                            color: #525355;

                        }

                    }
                    .ship_three {
                        float: left;
                        padding-left: 0.25rem;

                        span {
                            font-size: 0.25rem;
                            float: left;
                            padding-top: 0.06rem;
                            margin-left: 0.11rem;
                            color: #525355;

                        }

                    }
                }
            }

            /*拼单信息*/
            .fight_single {
                margin-top: 0.16rem;
                padding: 0.3rem 0.32rem;
                background: #fff;

                .fight_title {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    .left {
                        width: 50%;
                        flex-direction: row;
                        font-size: 0.29rem;
                        color: #131514;

                    }

                    .right {
                        width: 50%;
                        flex-direction: row;
                        text-align: right;
                        line-height: 0.3rem;
                        span {
                            /*float: right;*/
                            font-size: 0.26rem;
                            color: #9c9c9c;
                            i {
                                margin-left: 0.06rem;
                            }
                        }

                        .v-transfer-dom {

                            .vux-popup-dialog {
                                margin: 3rem 1rem;
                            }

                        }
                    }
                }
                .fight_cont {

                    .fight_list {
                        display: flex;
                        margin-top: 0.24rem;

                        .fight_left {
                            width: 50%;
                            flex-direction: row;

                            img {
                                width: 0.93rem;
                                height: 0.93rem;
                                border-radius: 50%;
                                margin: 0.14rem 0;
                                float: left;
                            }

                            span {
                                float: left;
                                margin-top: 0.47rem;
                                margin-left: 0.21rem;
                                font-size: 0.29rem;
                                color: #131514;

                            }

                        }
                        .fight_right {
                            flex-direction: row;
                            width: 50%;
                            margin: 0.33rem 0;

                            button {
                                float: right;
                                width: 1.46rem;
                                height: 0.6rem;
                                border-radius: 1rem;
                                background: #e94f4f;
                                color: #fff;
                                font-size: 0.28rem;
                            }

                            .fight_txt {
                                margin-top: 0.08rem;

                                h2 {
                                    font-size: 0.26rem;
                                    color: #131514;
                                    font-weight: normal;
                                    span {
                                        font-weight: bold;
                                    }
                                }

                                p {
                                    font-size: 12px;
                                    color: #585c5b;
                                    margin-top: 0.12rem;
                                }

                            }
                        }
                    }
                }
            }
            /*推荐*/
            .recommend_list {
                background: #fff;
                margin-top: 0.16rem;

                h1 {
                    font-size: 0.3rem;
                    color: #e53221;
                    text-align: center;
                    padding: 0.44rem 0 0.04rem;
                    margin-bottom: 0.1rem;
                }

                .product {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;

                    .product_list_box {
                        width: 33%;

                        .product_list {
                            background: #fff;
                            height: 3.8rem;
                            position: relative;
                            margin: 0.24rem 0.03rem 0;

                            img {
                                width: 2.43rem;
                                height: 2.43rem;
                                display: block;
                                margin: 0 auto;
                                border: 1px solid #f1f1f1;
                            }

                            h3 {
                                margin: 0.06rem;
                                text-align: center;
                                font-size: 0.24rem;
                                font-weight: normal;
                                line-height: 0.36rem;
                                display: -webkit-box;
                                /*! autoprefixer: off */
                                -webkit-box-orient: vertical;
                                /* autoprefixer: on */
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                            }

                            .price_num {
                                height: 0.6rem;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0 0.06rem 0 0.06rem;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                line-height: 0.36rem;
                                p {
                                    width: 50%;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }

                                .price {
                                    color: #d43428;
                                    font-size: 0.32rem;
                                    font-weight: bold;
                                    span {
                                        font-size: 12px;
                                    }

                                }
                                .num {
                                    text-align: right;
                                    color: #9b9b9b;
                                    font-size: 0.24rem;
                                }

                            }
                        }
                    }
                }
            }
            /*评价*/
            .evaluation_box {
                margin-top: 0.16rem;
                padding-top: 0.3rem;
                background: #fff;

                .evaluation_list {

                    .evaluation_title {
                        display: flex;
                        padding: 0 0.32rem 0.28rem;
                        border-bottom: 1px solid #eeeeee;

                        .left {
                            width: 50%;
                            flex-direction: row;
                            font-size: 0.29rem;
                            color: #131514;

                            span {
                                font-size: 0.22rem;
                                color: #e02c1f;
                            }

                        }
                        .right {
                            width: 50%;
                            flex-direction: row;

                            span {
                                float: right;
                                font-size: 0.26rem;
                                color: #9c9c9c;

                            }

                        }
                    }
                    .evaluation_label {
                        padding: 0.07rem 0.32rem 0;
                        display: flex;
                        flex-wrap: wrap;

                        span {
                            flex-direction: row;
                            display: inline-block;
                            padding: 0.16rem 0.2rem;
                            background: #fceae8;
                            border-radius: 6px;

                            color: #131514;
                            margin-right: 0.2rem;
                            margin-top: 0.22rem;
                        }

                    }
                    .list_box {
                        padding: 0 0.3rem;
                        background: #fff;
                        border-bottom: 1px solid #c3c3c3;

                        .list_num {

                            .list_title {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;

                                .left {
                                    width: 50%;

                                    img {
                                        width: 0.52rem;
                                        height: 0.52rem;
                                        border-radius: 50%;
                                        float: left;
                                        margin-top: 0.32rem;
                                    }

                                    span {
                                        float: left;
                                        margin-top: 0.46rem;
                                        margin-left: 0.14rem;
                                        font-size: 0.28rem;
                                        color: #131614;

                                    }

                                }
                                .right {
                                    width: 50%;

                                    span {
                                        float: right;
                                        margin-top: 0.47rem;
                                        font-size: 0.26rem;
                                        color: #989898;
                                    }

                                }
                            }
                            .list_txt {
                                margin-top: 0.24rem;
                                font-size: 0.28rem;
                                color: #555555;
                                line-height: 0.39rem;
                            }

                        }
                        .list_image {
                            margin-top: 0.15rem;

                            img {
                                width: 30%;
                                height: 2rem;
                                margin-left: 2%;
                            }

                        }
                        .list_model {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            color: #a4a4a4;
                            font-size: 0.25rem;
                            padding: 0.16rem 0 0.28rem;

                            .model_style {
                                margin-left: 0.3rem;
                            }

                        }
                    }
                    .view_all {

                        p {
                            padding: 0.27rem 0;
                            text-align: center;
                            font-size: 0.29rem;
                            color: #323232;
                        }

                    }
                }
            }
            /*商品详情图片*/
            .product_pic_box {
                margin-top: 0.16rem;
                background: #fff;

                .pic_title {
                    display: flex;
                    padding: 0.32rem;
                    border-bottom: 1px solid #eeeeee;

                    .left {
                        width: 50%;
                        flex-direction: row;
                        font-size: 0.29rem;
                        color: #131514;

                    }

                    .right {
                        width: 50%;
                        flex-direction: row;

                        span {
                            float: right;
                            font-size: 0.26rem;
                            color: #9c9c9c;

                        }

                    }
                }
                .pic_box {
                    margin-top: 0.1rem;

                    img {
                        width: 100%;
                        height: auto;
                    }

                }
            }
        }
    }

    .v-transfer-dom > .vux-popup-dialog.vux-popup-top {
        width: 80.53%;
        position: absolute;
        left: 9.73%;
        top: 15%;
        border-radius: 0.2rem;
        background: #fff;

        .vux-scrollable {

            .show_header_title {

                h1 {
                    margin: 0.42rem 0;
                    font-size: 0.34rem;
                    color: #333;
                    text-align: center;
                }

                span {
                    width: 0.3rem;
                    height: 0.3rem;
                    background: url('../../assets/img/close.png') no-repeat center center;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0.3rem;
                    right: 0.3rem;
                }

            }
            .show_list {
                width: 100%;
                height: 7rem;
                overflow-y: scroll;

                .list_cont {
                    display: flex;
                    border-top: 1px solid #f5f5f5;

                    .fight_left {
                        width: 70%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        margin: 0.24rem 0 0 0.22rem;

                        img {
                            width: 0.93rem;
                            height: 0.93rem;
                            border-radius: 50%;
                            margin: 0.14rem 0;
                        }

                        .list_time {
                            margin-top: 0.3rem;
                            margin-left: 0.25rem;
                            color: #131514;
                            font-weight: bold;
                            font-size: 0.28rem;

                            .name {
                                color: #333;
                                margin-bottom: 0.16rem;
                            }

                            .time {
                                color: #909090;
                            }

                        }
                    }
                    .fight_right {
                        flex-direction: row;
                        width: 30%;
                        margin: 0.47rem 0.22rem 0 0;

                        button {
                            float: right;
                            width: 1.46rem;
                            height: 0.6rem;
                            border-radius: 1rem;
                            background: #d63539;
                            color: #fff;
                            font-size: 0.29rem;
                        }

                        .fight_txt {
                            margin-top: 0.08rem;
                            font-size: 0.26rem;
                            h2 {
                                color: #131514;
                                font-weight: normal;
                            }

                        }
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="cont_scroll_box">
        <swiper :list="demo03_list" height="7.5rem" dots-class="custom-bottom" dots-position="right"></swiper>
        <!-- 详情信息 -->
        <div class="detail_box">
            <!-- 商品价格信息 -->
            <div class="detail_prise">
                <div class="prise_box">
                    <h2><i style="font-size: 0.4rem;font-style: normal;">￥</i>{{product.discountPrice?product.discountPrice:product.price}}
                    </h2>
                    <span><i style="font-size: 0.24rem;font-style: normal;">￥</i>{{product.price}}</span>
                </div>
                <div class="people_num">
                    <h3>已拼{{product.alreadySold}}件 · {{product.leastCount}}人拼单</h3>
                </div>
            </div>
            <!-- 商品详细信息 -->
            <div class="product_information">
                <h1>{{product.name}}</h1>
            </div>
            <!-- 优惠信息 -->
            <div class="product_offer ">
                <div class="coupon">
                    <i class="voucher"></i>
                    <span>满1000元减50元</span>
                </div>
                <div class="shipping">
                    <div class="ship_one">
                        <i class="ship_pic"></i>
                        <span>全场包邮</span>
                    </div>
                    <div class="ship_two">
                        <i class="ship_pic"></i>
                        <span>24小时内发货</span>
                    </div>
                    <div class="ship_three">
                        <i class="ship_pic"></i>
                        <span>假一赔十</span>
                    </div>
                </div>
            </div>
            <!-- 拼单信息-->
            <div class="fight_single">
                <div class="fight_title">
                    <p class="left">{{product_open == null ? 0 :product_open.length}}人在拼单</p>
                    <p class="right">
                        <span @click="product_open == null|| product_open.length == 0 ? '' :show_list()"
                              v-show="product_open && product_open.length > 0">查看更多 <i
                                class="right_icon"></i></span>
                        <div v-transfer-dom>
                            <popup v-model="show16" position="top" should-scroll-top-on-show style="height:8.14rem;">
                                <div @click.native="show16 = false" scrollable class="vux-scrollable">
                                    <div class="show_header_title">
                                        <h1>正在拼单</h1>
                                        <span @click="hide_list"></span>
                                    </div>
                                    <div class="show_list">
                                        <div class="list_cont" v-for="open in product_open"
                                             v-on:click="gotoBuying(open.orderId)">
                                            <div class="fight_left">
                                                <img :src="open.userHeadImgUrl" alt="">
                                                <div class="list_time">
                    <p class="name">{{open.userName}}</p>
                    <p class="time">剩余{{comJS.updateTime(open.restTime)}}</p>
                </div>
            </div>
            <div class="fight_right">
                <button>去拼单</button>
            </div>
        </div>
    </div>
    </div>
    </popup>
    </div>
    </p>
    </div>
    <div class="fight_cont">
        <div v-for="(open,index) in product_open" v-if="index < 2"
             v-on:click="gotoBuying(open.orderId)"
             :class="index === product_open.length - 1 ? 'fight_list': 'fight_list vux-1px-b' ">
            <div class="fight_left">
                <img :src="open.userHeadImgUrl" alt="">
                <span>{{open.userName}}</span>
            </div>
            <div class="fight_right">
                <button>去拼单</button>
                <div class="fight_txt">
                    <h2>还差<span style="color:#d63539">{{open.restNeedNum}}人</span>拼成</h2>
                    <p>剩余{{comJS.updateTime(open.restTime)}}</p>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend_list">
        <h1>为您推荐</h1>
        <div class="product">
            <!-- 一行两列，接收数据的时候一定要双重遍历 -->
            <div v-for="(info,index) in homeList.obj.list" class="product_list_box" v-if="index < 6" @click="updateProduct(info)">
                <a href="javascript:void(0)">
                    <div class="product_list">
                        <img v-lazy="{src:info.mainImage}" alt="">
                        <h3>{{info.name}}</h3>
                        <div class="price_num">
                            <p class="price"><span>￥</span>{{info.discountPrice?info.discountPrice:info.price}}</p>
                            <p class="num">已拼{{info.alreadySold}}件</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!-- 评价 -->
    <div class="evaluation_box">
        <div class="evaluation_list">
            <div class="evaluation_title">
                <p class="left">商品评价({{queryJudge == null ? 0 :queryJudge.length}}) &nbsp; <span>好评98%</span></p>
                <p class="right" v-show="queryJudge == null ? false :queryJudge.length > 0">
                    <span @click="getmore">查看更多 <i
                            class="right_icon"></i></span>
                </p>
            </div>

            <!--TODO YLB 评价标签-->
            <!--<div class="evaluation_label">
                <span>手机不错(127)</span>
                <span>速度快(74)</span>
                <span>手感好(73)</span>
            </div>-->
            <!--                          -->


            <div v-if="queryJudge.length >= 1" class="list_box">
                <div v-for="(queryInfo,index) in queryJudge" v-if="index < 2">
                    <div class="list_num">
                        <div class="list_title">
                            <div class="left">
                                <img src="../../assets/img/miao.png" alt="">
                                <span>hxz</span>
                            </div>
                            <div class="right">
                                <span>{{queryInfo.createTime.substr(0,queryInfo.createTime.length-2)}}</span>
                            </div>
                        </div>
                        <p class="list_txt">{{queryInfo.content}}</p>
                    </div>
                    <div class="list_image" v-if="queryInfo.images">
                        <img class="previewer-demo-img" v-for="(item, index) in queryInfo.images.split(',')"
                             :src="item.src" width="100"
                             @click="show(index)">
                        <div v-transfer-dom>
                            <previewer :list="queryInfo.images.split(',')" ref="previewer" :options="options"
                                       @on-index-change="logIndexChange"></previewer>
                        </div>
                    </div>
                    <!--<div class="list_model">
                        <div class="model_color">
                            <span class="left">颜色：</span>
                            <span class="right">金色</span>
                        </div>
                        <div class="model_style">
                            <span class="left">款式：</span>
                            <span class="right">64GB【移动联通电信4G手机】</span>
                        </div>
                    </div>-->
                </div>

            </div>
            <div v-if="queryJudge == null ? false :queryJudge.length > 0" class="view_all">
                <p>查看全部评价</p>
            </div>
        </div>
    </div>
    <!-- 商品详情图片 -->
    <div class="product_pic_box">
        <div class="pic_title">
            <p class="left">商品详情</p>
            <p class="right">
                <!--<span>查看更多 <i class="right_icon"></i></span>-->
            </p>
        </div>
        <div class="pic_box" v-for="src in list1">
            <img v-lazy="{src: src, loading: loadingImg, error: errorImg}" alt="">
        </div>
    </div>
    <load-more :show-loading="false" tip='我是有底线的' background-color="#fbf9fe"></load-more>
    </div>
    </div>
</template>
<script>
    import {mapActions, mapState} from 'vuex'

    import {Flexbox, FlexboxItem, Actionsheet, TransferDom, Swiper, GroupTitle, SwiperItem} from 'vux'
    import {Popup, Group, Cell, XButton, XSwitch, Toast, XAddress, ChinaAddressData, LoadMore} from 'vux'
    import {Previewer} from 'vux'
    import {XImg} from 'vux'
    import {GET_HOMELIST} from 'store/home'
    export default {
        directives: {
            TransferDom
        },
        components: {
            Flexbox,
            FlexboxItem,
            Actionsheet,
            TransferDom,
            Swiper,
            GroupTitle,
            SwiperItem,
            Previewer,
            XImg,
            Popup,
            Group,
            Cell,
            XButton,
            XSwitch,
            Toast,
            XAddress,
            ChinaAddressData,
            LoadMore
        }, data() {
            return {
                //顶部菜单自定义宽度
                getBarWidth: function (index) {
                    return (index + 1) * 22 + 'px'
                },
                product: {},  //商品详情
                product_open: [], //拼单列表
                queryJudge: [], //评价列表
                demo03_list: [],   //轮播图片


                list: [{  //评论图片
                    msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwu9ze86j20m80b40t2.jpg',
                    src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwu9ze86j20m80b40t2.jpg'
                },
                    {
                        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg',
                        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwvqwuoaj20xc0p0t9s.jpg'
                    }, {
                        msrc: 'http://ww1.sinaimg.cn/thumbnail/663d3650gy1fplwwcynw2j20p00b4js9.jpg',
                        src: 'http://ww1.sinaimg.cn/large/663d3650gy1fplwwcynw2j20p00b4js9.jpg'
                    }],
                options: {
                    getThumbBoundsFn(index) {
                        // find thumbnail element
                        let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                        // get window scroll Y
                        let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                        // optionally get horizontal scroll
                        // get position of element relative to viewport
                        let rect = thumbnail.getBoundingClientRect()
                        // w = width
                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                        // Good guide on how to get element coordinates:
                        // http://javascript.info/tutorial/coordinates
                    }
                },
                list1: [],//商品详情图片
                show16: false,
                timer: null,
                goOut: false,
            }
        },
        activated() {
            console.log(this.$route)
            this.init()
        }, methods: {
            ...mapActions([GET_HOMELIST]),
            init() {
                //  初始化
                this.timer = null;
                this.list1 = []
                this.product_open = [], //拼单列表
                this.queryJudge = [], //评价列表
                this.demo03_list = [],   //轮播图片
                this.getDisplayProduct();
                this.getDisplayAcquired();
                // this.getQueryJudge();
                this.getTemplateList();
            },
            updateProduct(info){
                clearInterval(this.timer)
                this.timer = null
                this.$router.replace({path: '/home/product_details', query: {productId: info.productId, templateId: info.templateId, sharePage: this.$route.query.sharePage || null}})
                this.$emit("infoFather");
                this.init()
            },
            //获取商品详情
            getDisplayProduct() {
                displayProduct({productId: this.$route.query.productId || null})
                    .then((res) => {
                        this.product = res.body.content;
                        let arr = [];
                        if (res.body.content.rollImages || res.body.content.rollImages !== null) {
                            res.body.content.rollImages.split(',').forEach(function (v, i) {
                                arr.push({url: 'javascript:', img: v})
                            })
                            this.demo03_list = arr;
                        }
                        if (res.body.content.detailImages || res.body.content.detailImages !== null) {
                            this.list1 = res.body.content.detailImages.split(',');
                        }
                        this.$emit("get", res.body.content)
                    })
            },


            //获取拼单列表
            getDisplayAcquired() {
                displayOpened({templateId: this.$route.query.templateId})
                    .then((res) => {
                        this.product_open = res.body.content;
                    })
                    .then(() => {
                        if (this.product_open && this.product_open.length) {
                            this.timer = setInterval(() => {
                                this.product_open.forEach((v, i) => {
                                    if (v.restTime <= 0) {
                                        return;
                                    }
                                    v.restTime--
                                    // console.log(this.comJS.updateTime(this.product_open[0].restTime))
                                })
                            }, 1000)
                        } else {
                            return;
                        }
                    })
            },

            //获取产品评价
            getQueryJudge() {
                queryJudge({templateId: this.$route.query.templateId})
                    .then((res) => {
                        if (res.body.content.length > 0) {
                            this.queryJudge = res.body.content
                        }
                    })
            },
            getmore(){
                if(this.$route.query.sharePage && this.$route.query.sharePage === '1'){
                    this.comJS.openApp()
                } else{
                    this.$router.push({path:'/home/evaluation',query:{templateId: this.$route.query.templateId}})
                }
            },

            //获取为您推荐列表
            getTemplateList() {
                if(this.homeList !== {} || this.homeList !== null || this.homeList.list.length > 0){
                    displayTemplates({type: 1})
                        .then((res) => {
                            this.GET_HOMELIST(res.body.content)
                        })
                }
            },
            //给父元素返回商品详情
            backInfo() {
                return this.product;
            },
            logIndexChange(arg) {
//                console.log(arg)
            },
            show(index) {
                this.$refs.previewer.show(index)
            },
            show_list: function () {
                this.show16 = true;
            },
            hide_list: function () {
                this.show16 = false;
            },
            gotoBuying: function (id) {
                if(this.$route.query.sharePage && this.$route.query.sharePage === "1"){
                    this.comJS.openApp()
                    return;
                }
                let token = localStorage.getItem('token');
                if (!token) {
                    this.Interactive.pushTokentoJS();
                    return;
                }
                this.product.buyNumber = 1;
                localStorage.setItem('product', JSON.stringify(this.product));
                this.$router.push({
                    path: '/home/buying',
                    query: {
                        productId: this.$route.query.productId,
                        templateId: this.$route.query.templateId,
                        orderId: id
                    }
                })
            },
            updateTime: function (time) {

                return time--;
                // return this.comJS.updateTime(time);
            }
        }, computed: {
            ...mapState({homeList: state => state.homeList})
        },
        deactivated() {
            // console.log(this.timer)
            clearInterval(this.timer)
            this.timer = null
        }
    }
</script>

